{% extends 'base.html' %}
{% load static %}

{% block title %}
首页
{% endblock %}

{% block content %}
    <!-- section main content 编辑推荐 -->
    <section class="main-content">
        <div class="container-xl">
            <div class="row gy-4">
                <div class="col-lg-8"><!-- section header -->
                    <div class="section-header">
                        <h3 class="section-title">编辑推荐</h3>
                        <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                    </div>
                    <div class="padding-30 rounded bordered">
                        <div class="row gy-5">
                            {% for rec_blog in rec_blogs %}
                            {% if forloop.counter == 1 %}
                                <div class="col-sm-6">
                                <!-- post  TOP 1-->
                                <div class="post">
                                    <div class="thumb rounded">
                                        {% if rec_blog.blog.category.wz_class == 1 %}
                                        <a href="/life/list/?btype=1" class="category-badge position-absolute">{{ rec_blog.blog.category }}</a>
                                        {% elif rec_blog.blog.category.wz_class == 2 %}
                                        <a href="/inspiration/list/?btype=2" class="category-badge position-absolute">{{ rec_blog.blog.category }}</a>
                                        {% elif rec_blog.blog.category.wz_class == 3 %}
                                        <a href="/fashion/list/?btype=3" class="category-badge position-absolute">{{ rec_blog.blog.category }}</a>
                                        {% elif rec_blog.blog.category.wz_class == 4 %}
                                        <a href="/comment/list/?btype=4" class="category-badge position-absolute">{{ rec_blog.blog.category }}</a>
                                        {% endif %}

                                        <span class="post-format"><i class="icon-picture"></i></span>
                                        {% if rec_blog.blog.category.wz_class == 1 %}
                                            <a href="/life/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                        {% elif rec_blog.blog.category.wz_class == 2 %}
                                            <a href="/inspiration/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                        {% elif rec_blog.blog.category.wz_class == 3 %}
                                            <a href="/fashion/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                        {% elif rec_blog.blog.category.wz_class == 4 %}
                                            <a href="/comment/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                        {% endif %}

                                    </div>
                                    <ul class="meta list-inline mt-4 mb-0">
                                        <li class="list-inline-item">
                                            <a href="/user/person/">
                                                <img width="30" height="30" style="object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1;" src="/media/{{ rec_blog.blog.user.user_head }}" class="author" alt="author"/>
                                                {{ rec_blog.blog.user }}
                                            </a>
                                        </li>
                                        <li class="list-inline-item">{{ rec_blog.create_time }}</li>
                                    </ul>
                                    <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">{{ rec_blog.title }}</a></h5>
                                    <p class="excerpt mb-0">{{ rec_blog.blog.desc }}</p>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}

                            <div class="col-sm-6"><!-- post -->
                                {% for rec_blog in rec_blogs %}
                                    {% if forloop.counter > 1 %}
                                    <div class="post post-list-sm square">
                                        <div class="thumb rounded">
                                            {% if rec_blog.blog.category.wz_class == 1 %}
                                            <a href="/life/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                            {% elif rec_blog.blog.category.wz_class == 2 %}
                                            <a href="/inspiration/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                            {% elif rec_blog.blog.category.wz_class == 3 %}
                                            <a href="/fashion/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                            {% elif rec_blog.blog.category.wz_class == 4 %}
                                            <a href="/comment/detail/{{ rec_blog.blog.id }}">
                                                <div class="inner">
                                                    <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ rec_blog.blog.fm_image }}" alt="post-title"/>
                                                </div>
                                            </a>
                                            {% endif %}

                                        </div>
                                        <div class="details clearfix">
                                            <h6 class="post-title my-0">
                                                {% if rec_blog.blog.category.wz_class == 1 %}
                                                <a href="/life/detail/{{ rec_blog.blog.id }}">{{ rec_blog.blog.title }}</a>
                                                {% elif rec_blog.blog.category.wz_class == 2 %}
                                                <a href="/inspiration/detail/{{ rec_blog.blog.id }}">{{ rec_blog.blog.title }}</a>
                                                {% elif rec_blog.blog.category.wz_class == 3 %}
                                                <a href="/fashion/detail/{{ rec_blog.blog.id }}">{{ rec_blog.blog.title }}</a>
                                                {% elif rec_blog.blog.category.wz_class == 4 %}
                                                <a href="/comment/detail/{{ rec_blog.blog.id }}">{{ rec_blog.blog.title }}</a>
                                                {% endif %}
                                            </h6>
                                            <ul class="meta list-inline mt-1 mb-0">
                                                <li class="list-inline-item">{{ rec_blog.blog.create_time }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                    {% endif %}

                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="spacer" data-height="50"></div>
                    <!-- horizontal ads -->
                    <div class="ads-horizontal text-md-center"><span class="ads-title">- 广告 -</span><a href="#"><img
                            src="{% static 'images/ads/ad-750.png' %}" alt="Advertisement"/></a></div>
                    <div class="spacer" data-height="50"></div>


                    <div class="spacer" data-height="50"></div>
                    <!-- section header -->
                    <div class="section-header">
                        <h3 class="section-title">最新文章</h3>
                        <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                    </div>
                    <div class="padding-30 rounded bordered">
                        <div class="row">
                            {% for new_blog in new_blogs %}
                                <div class="col-md-12 col-sm-6">
                                    <!-- post -->
                                    <div class="post post-list clearfix">
                                        <div class="thumb rounded">
                                            <span class="post-format-sm"><i class="icon-picture"></i></span>
                                            {% if new_blog.category.wz_class == 1 %}
                                                <a href="/life/detail/{{ new_blog.id }}">
                                                    <div class="inner">
                                                        <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ new_blog.fm_image }}" alt="post-title"/>
                                                    </div>
                                                </a>
                                            {% elif new_blog.category.wz_class == 2 %}
                                                <a href="/inspiration/detail/{{ new_blog.id }}">
                                                    <div class="inner">
                                                        <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ new_blog.fm_image }}" alt="post-title"/>
                                                    </div>
                                                </a>
                                            {% elif new_blog.category.wz_class == 3 %}
                                                <a href="/fashion/detail/{{ new_blog.id }}">
                                                    <div class="inner">
                                                        <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ new_blog.fm_image }}" alt="post-title"/>
                                                    </div>
                                                </a>
                                            {% elif new_blog.category.wz_class == 4 %}
                                                <a href="/comment/detail/{{ new_blog.id }}">
                                                    <div class="inner">
                                                        <img style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover;" src="{{ new_blog.fm_image }}" alt="post-title"/>
                                                    </div>
                                                </a>
                                            {% endif %}
                                        </div>
                                        <div class="details">
                                            <ul class="meta list-inline mb-3">
                                                <li class="list-inline-item">
                                                    <a href="/user/person/">
                                                        <img width="30" height="30" style="object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1;" src="/media/{{ new_blog.user.user_head }}" class="author" alt="author"/>
                                                        {{ new_blog.user }}
                                                    </a>
                                                </li>
                                                <li class="list-inline-item">
                                                    {% if new_blog.category.wz_class == 1 %}
                                                        <a href="/life/list/?btype=1">{{ new_blog.category }}</a>
                                                    {% elif new_blog.category.wz_class == 2 %}
                                                        <a href="/inspiration/list/?btype=2">{{ new_blog.category }}</a>
                                                    {% elif new_blog.category.wz_class == 3 %}
                                                        <a href="/fashion/list/?btype=3">{{ new_blog.category }}</a>
                                                    {% elif new_blog.category.wz_class == 4 %}
                                                        <a href="/comment/list/?btype=4">{{ new_blog.category }}</a>
                                                    {% endif %}
                                                </li>
                                                <li class="list-inline-item">
                                                    {{ new_blog.create_time }}
                                                </li>
                                            </ul>
                                            <h5 class="post-title">
                                                {% if new_blog.category.wz_class == 1 %}
                                                    <a href="/life/detail/{{ new_blog.id }}">{{ new_blog.title }}</a>
                                                {% elif new_blog.category.wz_class == 2 %}
                                                    <a href="/inspiration/detail/{{ new_blog.id }}">{{ new_blog.title }}</a>
                                                {% elif new_blog.category.wz_class == 3 %}
                                                    <a href="/fashion/detail/{{ new_blog.id }}">{{ new_blog.title }}</a>
                                                {% elif new_blog.category.wz_class == 4 %}
                                                    <a href="/comment/detail/{{ new_blog.id }}">{{ new_blog.title }}</a>
                                                {% endif %}
                                            </h5>
                                            <p class="excerpt mb-0">{{ new_blog.desc }}</p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}


                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <!-- sidebar -->
                    <div class="sidebar">
                        <!-- widget popular posts -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">综合热门</h3>
                                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content">
                                <!-- post -->
                                {% for hot_blog in hot_blog_list %}
                                    <div class="post post-list-sm circle">
                                        <div class="thumb circle">
                                            <span class="number">{{ forloop.counter }}</span>
                                            <a href="blog-single.html">
                                                <div class="inner">
                                                    <img width="30" height="10" src="{{ hot_blog.fm_image }}"
                                                         alt="post-title"/>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="details clearfix">
                                            <h6 class="post-title my-0">
                                                <a href="/life/detail/{{ hot_blog.pk }}">{{ hot_blog.title }}</a>
                                            </h6>
                                            <ul class="meta list-inline mt-1 mb-0">
                                                <li class="list-inline-item">{{ hot_blog.create_time }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                {% endfor %}


                            </div>
                        </div>
                        <!-- widget categories -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">探索话题</h3>
                                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content">
                                <ul class="list">
                                    {% for k,v in catogory_count.items %}
                                    	<li><a href="#">{{ k }}</a><span>{{ v }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <!-- widget newsletter -->

                        <!-- widget advertisement -->
                        <div class="widget no-container rounded text-md-center"><span class="ads-title">- 广告 -</span><a
                                href="#"
                                class="widget-ads"><img src="{% static 'images/ads/ad-360.png' %}" alt="Advertisement"/></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    <script>
        function toggleUserMenu(event) {
            event.stopPropagation();
            const menu = document.getElementById('userMenu');
            menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
        }

        document.addEventListener('click', function (event) {
            const menu = document.getElementById('userMenu');
            const burgerButton = document.querySelector('.burger-menu');
            if (!menu.contains(event.target) && !burgerButton.contains(event.target)) {
                menu.style.display = 'none';
            }
        });
    </script>
{% endblock %}

